<template>
  <view class="waterfall">
  	<uv-waterfall ref="waterfall"
  		v-model="list"
  		:add-time="100"
		columnGap="10"
  		@changeList="changeList">
  		<!-- 第一列数据 -->
  		<template v-slot:list1>
  			<!-- 为了磨平部分平台的BUG，必须套一层view -->
  			<view>
  				<view v-for="(item, index) in list1"
  					:key="item.id" @click="description(item.id)"
  					class="waterfall-item">
  					  <view class="haowu_img">
  						<image class="img" :lazy-load="true" :lazy-load-margin="0" mode="widthFix"
  						  :src="item.image || 'https://xixijj.oss-cn-chengdu.aliyuncs.com/attach/2023/09/ddc75202309251617555880.jpg'"
  						  ></image>
  					  </view>
  					  <view class="details">
  						<view class="price">
  						  <view class="wenben">{{item.name}}</view>
  						</view>
  						<view class="caibox">
  						  <view class="left">
  							<text>{{item.brief}}</text>
  						  </view>
  						  <view class="pricemini">
  							<text>&yen;</text>
  							{{item.sales_price}}
  						  </view>
  						</view>
  					  </view>
  				</view>
  			</view>
  		</template>
  		<!-- 第二列数据 -->
  		<template v-slot:list2>
  			<!-- 为了磨平部分平台的BUG，必须套一层view -->
  			<view>
  				<view v-for="(item, index) in list2"
  					:key="item.id" @click="description(item.id)"
  					class="waterfall-item">
  					  <view class="haowu_img">
  						<image class="img" :lazy-load="true" :lazy-load-margin="0" mode="widthFix"
  						  :src="item.image || 'https://xixijj.oss-cn-chengdu.aliyuncs.com/attach/2023/09/ddc75202309251617555880.jpg'"
  						  ></image>
  					  </view>
  					  <view class="details">
  						<view class="price">
  						  <view class="wenben">{{item.name}}</view>
  						</view>
  						<view class="caibox">
  						  <view class="left">
  							<text>{{item.brief}}</text>
  						  </view>
  						  <view class="pricemini">
  							<text>&yen;</text>
  							{{item.sales_price}}
  						  </view>
  						</view>
  					  </view>
  				</view>
  			</view>
  		</template>
  	</uv-waterfall>
  </view>
</template>

<script>
  export default {
    props: {
      productlist: {
        type: Array,
        default: () => []
      }
    },
    data() {
      return {
		  list:[],
        list1: [],// 瀑布流第一列数据
        list2: [],// 瀑布流第二列数据
      }
    },
	watch:{
		productlist(newval){
			this.list = newval
		}
	},
	onHide(){
		this.$refs.waterfall.clear();
	},
    methods: {
		// 这点非常重要：e.name在这里返回是list1或list2，要手动将数据追加到相应列
		changeList(e){
			this[e.name].push(e.value);
		},
	remove(){
		this.list = []
		this.$refs.waterfall.clear()
		this.list1 = []
		this.list2 = []
	},
      description(id) {
        uni.navigateTo({
          url: `/page_detailsbtn/product-details/index?id=${id}`
        })
      }
    },
  }
</script>

<style lang="less">
  .waterfall-item{
  	width: 325rpx;
  	margin-bottom: 10px;
  	border-radius: 20rpx;
  	background-color: #fff;
  	overflow: hidden;
  	box-shadow: 0 12rpx 12rpx 0 rgba(225, 225, 225, 0.2);
  }
  .haowu_img{
    Width: 325rpx;
    object-fit: contain;
    .img{
  	  width: 100%;
    }
  }
      .details {
        padding: 10rpx 16rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
  
        .price {
          font-size: 30rpx;
          display: flex;
          align-items: center;
          justify-content: space-between;
  
          .wenben {
            width: 100%;
            white-space: nowrap;
            /* 禁止文本换行 */
            overflow: hidden;
            /* 隐藏元素中的文本溢出部分 */
            text-overflow: ellipsis;
            /* 在文本溢出时显示省略号 */
          }
        }
  
        .caibox {
          display: flex;
          justify-content: space-between;
          align-items: flex-end;
  
          .left {
            width: 200rpx;
            white-space: nowrap;
            /* 禁止文本换行 */
            overflow: hidden;
            /* 隐藏元素中的文本溢出部分 */
            text-overflow: ellipsis;
            /* 在文本溢出时显示省略号 */
            font-size: 22rpx;
            opacity: 0.6;
            margin-bottom: 10rpx;
          }
  
          .pricemini {
            font-size: 34rpx;
            color: #CC0022;
          }
        }
      }
</style>